<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="UTF-8">
	<title>打包日志统计</title>
</head>
<body>
	<button id="btn">点击</button>
	<p>提示：本地保存日志，达到maxNum后一次性发送</p>

	<script type="text/javascript">
		// 打包统计对象
		var LogPack = function() {
			var data = [],					// 请求缓存数组
				MaxNum = 10,				// 请求缓存最大值
				itemSplitStr = '|',			// 统计参数间隔符
				keyValueSplitStr = '*',		// 统计参数键值对间隔符
				img = new Image();			// 请求触发器，通过图片 src 属性实现简单的 get 请求
			// 发送请求
			function sendLog() {
					// 请求参数
				var logStr = '',
					// 截取 MaxNum 个数统计项发送
					fireData = data.splice(0, MaxNum);
				// 遍历统计项
				for (var i = 0, len = fireData.length; i < len; i++) {
					// 添加统计项顺序索引
					logStr += 'log' + i + '=';
					// 遍历统计项内的统计参数
					for (var j in fireData[i]) {
						// 添加统计项参数键 + 间隔符 + 值
						logStr += j + keyValueSplitStr + fireData[i][j];
						// 添加统计项统计参数间隔符
						logStr += itemSplitStr;
					}
					// &符拼接多个统计项
					logStr = logStr.replace(/\|$/, '') + '&';
				}
				// 添加统计项打包长度
				logStr += 'logLength=' + len;
				// 输出调试
				console.log(logStr.split('&'));
				// 请求触发器发送统计
				img.src = 'a.gif?' + logStr;
			}
			// 统计方法
			return function(param) {
				if(!param) {
					sendLog();
					return;
				}
				// 添加统计项
				data.push(param);
				// 如果统计项大于请求最大值则发送统计请求包
				data.length >= MaxNum && sendLog();
			}
		}();

		var btn = document.getElementById('btn');
		// 点击统计
		btn.onclick = function() {
			LogPack({
				btnId: this.id,
				context: this.innerHTML,
				type: 'click'
			});
		}
		// 点击统计
		btn.onmouseover = function() {
			LogPack({
				btnId: this.id,
				context: this.innerHTML,
				type: 'mouseover'
			});
		}
	</script>
</body>
</html>